// 二维码生成/识别工具渲染器
window.QRCodeRenderer = class QRCodeRenderer {
    static getHTML() {
        return `
            <div class="flex items-center justify-between mb-6">
                <h2 class="text-3xl font-bold text-gray-800">二维码生成/识别工具</h2>
                <div class="flex items-center space-x-4">
                    <div class="text-sm text-gray-500">
                        <span id="qr-status" class="font-medium">就绪</span>
                    </div>
                </div>
            </div>

            <!-- 模式选择 -->
            <div class="bg-gray-50 border rounded-lg p-4 mb-6">
                <div class="flex items-center space-x-6 mb-4">
                    <label class="inline-flex items-center">
                        <input type="radio" class="form-radio text-blue-600" name="qr-mode" value="generate" checked>
                        <span class="ml-2 font-medium">生成二维码</span>
                    </label>
                    <label class="inline-flex items-center">
                        <input type="radio" class="form-radio text-blue-600" name="qr-mode" value="decode">
                        <span class="ml-2 font-medium">识别二维码</span>
                    </label>
                </div>
            </div>

            <!-- 错误/成功提示 -->
            <div id="qr-error" class="hidden bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-lg mb-4">
                <div class="flex items-center">
                    <i data-feather="alert-circle" class="w-5 h-5 mr-2 text-red-500"></i>
                    <div>
                        <span class="font-medium">处理失败：</span>
                        <span id="qr-error-message"></span>
                    </div>
                </div>
            </div>

            <div id="qr-success" class="hidden bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded-lg mb-4">
                <div class="flex items-center">
                    <i data-feather="check-circle" class="w-5 h-5 mr-2 text-green-500"></i>
                    <div>
                        <span class="font-medium">处理成功：</span>
                        <span id="qr-success-message"></span>
                    </div>
                </div>
            </div>

            <!-- 生成模式 -->
            <div id="generate-mode" class="space-y-6">
                <!-- 内容输入 -->
                <div>
                    <div class="flex items-center justify-between mb-2">
                        <label class="block text-sm font-medium text-gray-700">输入内容</label>
                        <div class="flex items-center space-x-2 text-sm text-gray-500">
                            <span id="generate-char-count">0 字符</span>
                            <span>|</span>
                            <span id="generate-content-type">文本</span>
                        </div>
                    </div>
                    <div class="relative">
                        <textarea id="qr-input" 
                            rows="4" 
                            class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                            placeholder="输入要生成二维码的内容...&#10;支持: URL、邮箱、电话、WiFi信息等"></textarea>
                    </div>
                </div>

                <!-- 快捷模板 -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">常用模板</label>
                    <div class="grid grid-cols-2 md:grid-cols-4 gap-2">
                        <button class="qr-template bg-gray-100 hover:bg-gray-200 text-gray-700 text-sm py-2 px-3 rounded-lg transition duration-200" data-type="url">
                            <i data-feather="link" class="w-4 h-4 mr-1 inline"></i>URL
                        </button>
                        <button class="qr-template bg-gray-100 hover:bg-gray-200 text-gray-700 text-sm py-2 px-3 rounded-lg transition duration-200" data-type="email">
                            <i data-feather="mail" class="w-4 h-4 mr-1 inline"></i>邮箱
                        </button>
                        <button class="qr-template bg-gray-100 hover:bg-gray-200 text-gray-700 text-sm py-2 px-3 rounded-lg transition duration-200" data-type="phone">
                            <i data-feather="phone" class="w-4 h-4 mr-1 inline"></i>电话
                        </button>
                        <button class="qr-template bg-gray-100 hover:bg-gray-200 text-gray-700 text-sm py-2 px-3 rounded-lg transition duration-200" data-type="wifi">
                            <i data-feather="wifi" class="w-4 h-4 mr-1 inline"></i>WiFi
                        </button>
                    </div>
                </div>

                <!-- 生成选项 -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">尺寸设置</label>
                        <div class="space-y-3">
                            <div class="flex items-center space-x-4">
                                <label class="text-sm text-gray-600 w-12">宽度:</label>
                                <input type="range" id="qr-width" min="128" max="512" value="256" class="flex-1">
                                <span id="qr-width-value" class="text-sm text-gray-600 w-12">256px</span>
                            </div>
                            <div class="flex items-center space-x-4">
                                <label class="text-sm text-gray-600 w-12">边距:</label>
                                <input type="range" id="qr-margin" min="0" max="10" value="4" class="flex-1">
                                <span id="qr-margin-value" class="text-sm text-gray-600 w-12">4px</span>
                            </div>
                        </div>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">颜色设置</label>
                        <div class="space-y-3">
                            <div class="flex items-center space-x-4">
                                <label class="text-sm text-gray-600 w-16">前景色:</label>
                                <input type="color" id="qr-dark-color" value="#000000" class="w-12 h-8 rounded border">
                                <input type="text" id="qr-dark-text" value="#000000" class="flex-1 px-2 py-1 text-sm border rounded">
                            </div>
                            <div class="flex items-center space-x-4">
                                <label class="text-sm text-gray-600 w-16">背景色:</label>
                                <input type="color" id="qr-light-color" value="#FFFFFF" class="w-12 h-8 rounded border">
                                <input type="text" id="qr-light-text" value="#FFFFFF" class="flex-1 px-2 py-1 text-sm border rounded">
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 高级选项 -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">纠错等级</label>
                    <select id="qr-error-level" class="w-full md:w-64 px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <option value="L">低 (7%) - 适用于干净环境</option>
                        <option value="M" selected>中 (15%) - 推荐设置</option>
                        <option value="Q">较高 (25%) - 适用于复杂环境</option>
                        <option value="H">高 (30%) - 适用于恶劣环境</option>
                    </select>
                </div>

                <!-- 操作按钮 -->
                <div class="flex flex-wrap items-center gap-3">
                    <button id="generate-qr" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg transition duration-200 flex items-center">
                        <i data-feather="grid" class="w-4 h-4 mr-2"></i>
                        生成二维码
                    </button>
                    <button id="clear-qr-input" class="bg-gray-200 hover:bg-gray-300 text-gray-700 font-bold py-2 px-4 rounded-lg transition duration-200">
                        清空内容
                    </button>
                </div>

                <!-- 生成结果 -->
                <div id="qr-result" class="hidden">
                    <div class="bg-white border rounded-lg p-6 text-center">
                        <h3 class="text-lg font-semibold text-gray-800 mb-4">生成的二维码</h3>
                        <div id="qr-canvas-container" class="mb-4"></div>
                        <div class="flex justify-center space-x-3">
                            <button id="download-qr" class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-lg transition duration-200 flex items-center">
                                <i data-feather="download" class="w-4 h-4 mr-2"></i>
                                下载PNG
                            </button>
                            <button id="copy-qr" class="bg-gray-600 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded-lg transition duration-200 flex items-center">
                                <i data-feather="copy" class="w-4 h-4 mr-2"></i>
                                复制图片
                            </button>
                        </div>
                        <div id="qr-info" class="mt-4 text-sm text-gray-600"></div>
                    </div>
                </div>
            </div>

            <!-- 识别模式 -->
            <div id="decode-mode" class="hidden space-y-6">
                <!-- 文件上传 -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">选择图片文件</label>
                    <div class="flex items-center space-x-4">
                        <input type="file" id="qr-file-input" accept="image/*" class="hidden">
                        <button id="select-qr-file" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg transition duration-200 flex items-center">
                            <i data-feather="upload" class="w-4 h-4 mr-2"></i>
                            选择图片文件
                        </button>
                        <span id="selected-file-name" class="text-sm text-gray-600"></span>
                    </div>
                </div>

                <!-- 拖拽上传区域 -->
                <div id="qr-drop-zone" class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center hover:border-blue-400 transition-colors duration-200">
                    <i data-feather="image" class="w-12 h-12 mx-auto mb-4 text-gray-400"></i>
                    <p class="text-gray-600">将图片拖拽到此处或点击上方按钮选择文件</p>
                    <p class="text-sm text-gray-500 mt-2">支持 PNG、JPG、GIF 等格式，最大10MB</p>
                </div>

                <!-- 预览和识别结果 -->
                <div id="decode-preview" class="hidden">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <!-- 图片预览 -->
                        <div class="bg-white border rounded-lg p-4">
                            <h3 class="text-lg font-semibold text-gray-800 mb-4">图片预览</h3>
                            <div id="qr-preview-container" class="text-center">
                                <canvas id="qr-preview-canvas" class="max-w-full h-auto border rounded"></canvas>
                                <div id="qr-preview-info" class="mt-2 text-sm text-gray-600"></div>
                            </div>
                        </div>

                        <!-- 识别结果 -->
                        <div class="bg-white border rounded-lg p-4">
                            <h3 class="text-lg font-semibold text-gray-800 mb-4">识别结果</h3>
                            <div id="decode-result-content">
                                <button id="decode-qr" class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-lg transition duration-200 flex items-center mx-auto">
                                    <i data-feather="search" class="w-4 h-4 mr-2"></i>
                                    开始识别
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 操作按钮 -->
                <div class="flex flex-wrap items-center gap-3">
                    <button id="clear-qr-decode" class="bg-gray-200 hover:bg-gray-300 text-gray-700 font-bold py-2 px-4 rounded-lg transition duration-200">
                        重新选择
                    </button>
                </div>
            </div>
        `;
    }

    static init() {
        // 模式切换
        const modeRadios = document.querySelectorAll('input[name="qr-mode"]');
        const generateMode = document.getElementById('generate-mode');
        const decodeMode = document.getElementById('decode-mode');

        modeRadios.forEach(radio => {
            radio.addEventListener('change', (e) => {
                if (e.target.value === 'generate') {
                    generateMode.classList.remove('hidden');
                    decodeMode.classList.add('hidden');
                } else {
                    generateMode.classList.add('hidden');
                    decodeMode.classList.remove('hidden');
                }
            });
        });

        this.initGenerateMode();
        this.initDecodeMode();
        this.initCommon();

        // 初始化Feather图标
        setTimeout(() => {
            if (typeof feather !== 'undefined') {
                feather.replace();
            }
        }, 100);
    }

    static initGenerateMode() {
        const input = document.getElementById('qr-input');
        const charCount = document.getElementById('generate-char-count');
        const contentType = document.getElementById('generate-content-type');
        const generateBtn = document.getElementById('generate-qr');
        const clearBtn = document.getElementById('clear-qr-input');
        const templates = document.querySelectorAll('.qr-template');
        const result = document.getElementById('qr-result');
        const canvasContainer = document.getElementById('qr-canvas-container');
        const downloadBtn = document.getElementById('download-qr');
        const copyBtn = document.getElementById('copy-qr');
        const qrInfo = document.getElementById('qr-info');

        // 尺寸控制
        const widthSlider = document.getElementById('qr-width');
        const widthValue = document.getElementById('qr-width-value');
        const marginSlider = document.getElementById('qr-margin');
        const marginValue = document.getElementById('qr-margin-value');

        // 颜色控制
        const darkColor = document.getElementById('qr-dark-color');
        const darkText = document.getElementById('qr-dark-text');
        const lightColor = document.getElementById('qr-light-color');
        const lightText = document.getElementById('qr-light-text');

        let currentCanvas = null;

        // 输入监听
        input.addEventListener('input', DevToolsUtils.debounce(() => {
            const text = input.value;
            charCount.textContent = `${text.length} 字符`;
            
            const validation = QRCodeTool.validateContent(text);
            if (validation.success) {
                contentType.textContent = validation.data.contentType;
                input.classList.remove('border-red-500');
                input.classList.add('border-green-500');
            } else {
                contentType.textContent = '无效';
                input.classList.remove('border-green-500');
                input.classList.add('border-red-500');
            }
        }, 300));

        // 尺寸滑块
        widthSlider.addEventListener('input', (e) => {
            widthValue.textContent = `${e.target.value}px`;
        });

        marginSlider.addEventListener('input', (e) => {
            marginValue.textContent = `${e.target.value}px`;
        });

        // 颜色同步
        darkColor.addEventListener('change', (e) => {
            darkText.value = e.target.value;
        });

        darkText.addEventListener('change', (e) => {
            if (/^#[0-9A-F]{6}$/i.test(e.target.value)) {
                darkColor.value = e.target.value;
            }
        });

        lightColor.addEventListener('change', (e) => {
            lightText.value = e.target.value;
        });

        lightText.addEventListener('change', (e) => {
            if (/^#[0-9A-F]{6}$/i.test(e.target.value)) {
                lightColor.value = e.target.value;
            }
        });

        // 模板按钮
        templates.forEach(template => {
            template.addEventListener('click', () => {
                const type = template.dataset.type;
                const templates = QRCodeTool.getTemplates();
                if (templates[type]) {
                    input.value = templates[type].template;
                    input.dispatchEvent(new Event('input'));
                }
            });
        });

        // 生成按钮
        generateBtn.addEventListener('click', async () => {
            const text = input.value;
            if (!text.trim()) {
                this.showError('请输入要生成二维码的内容');
                return;
            }

            DevToolsUtils.addLoading(generateBtn);
            this.setStatus('生成中...');

            const options = {
                width: parseInt(widthSlider.value),
                height: parseInt(widthSlider.value),
                margin: parseInt(marginSlider.value),
                color: {
                    dark: darkText.value,
                    light: lightText.value
                },
                errorCorrectionLevel: document.getElementById('qr-error-level').value
            };

            const qrResult = await QRCodeTool.generate(text, options);

            DevToolsUtils.removeLoading(generateBtn);

            if (qrResult.success) {
                currentCanvas = qrResult.data.canvas;
                canvasContainer.innerHTML = '';
                canvasContainer.appendChild(currentCanvas);
                
                qrInfo.innerHTML = `
                    <div class="grid grid-cols-2 gap-4 text-left">
                        <div>尺寸: ${qrResult.data.size}</div>
                        <div>纠错等级: ${qrResult.data.errorCorrectionLevel}</div>
                        <div>边距: ${qrResult.data.margin}px</div>
                        <div>内容长度: ${qrResult.data.text.length} 字符</div>
                    </div>
                `;
                
                result.classList.remove('hidden');
                this.showSuccess('二维码生成成功');
                this.setStatus('生成完成');
            } else {
                this.showError(qrResult.error);
                this.setStatus('生成失败');
            }
        });

        // 下载按钮
        downloadBtn.addEventListener('click', () => {
            if (currentCanvas) {
                const link = document.createElement('a');
                link.download = 'qrcode.png';
                link.href = currentCanvas.toDataURL('image/png');
                link.click();
            }
        });

        // 复制按钮
        copyBtn.addEventListener('click', async () => {
            if (currentCanvas) {
                try {
                    currentCanvas.toBlob(async (blob) => {
                        const item = new ClipboardItem({ 'image/png': blob });
                        await navigator.clipboard.write([item]);
                        DevToolsUtils.showToast('图片已复制到剪贴板', 'success');
                    });
                } catch (error) {
                    DevToolsUtils.showToast('复制失败: ' + error.message, 'error');
                }
            }
        });

        // 清空按钮
        clearBtn.addEventListener('click', () => {
            input.value = '';
            input.classList.remove('border-red-500', 'border-green-500');
            charCount.textContent = '0 字符';
            contentType.textContent = '文本';
            result.classList.add('hidden');
            currentCanvas = null;
        });
    }

    static initDecodeMode() {
        const fileInput = document.getElementById('qr-file-input');
        const selectFileBtn = document.getElementById('select-qr-file');
        const fileName = document.getElementById('selected-file-name');
        const dropZone = document.getElementById('qr-drop-zone');
        const preview = document.getElementById('decode-preview');
        const previewCanvas = document.getElementById('qr-preview-canvas');
        const previewInfo = document.getElementById('qr-preview-info');
        const decodeBtn = document.getElementById('decode-qr');
        const resultContent = document.getElementById('decode-result-content');
        const clearDecodeBtn = document.getElementById('clear-qr-decode');

        let currentFile = null;

        // 选择文件按钮
        selectFileBtn.addEventListener('click', () => {
            fileInput.click();
        });

        // 文件选择
        fileInput.addEventListener('change', (e) => {
            const file = e.target.files[0];
            if (file) {
                this.handleFile(file);
            }
        });

        // 拖拽处理
        dropZone.addEventListener('dragover', (e) => {
            e.preventDefault();
            dropZone.classList.add('border-blue-400', 'bg-blue-50');
        });

        dropZone.addEventListener('dragleave', (e) => {
            e.preventDefault();
            dropZone.classList.remove('border-blue-400', 'bg-blue-50');
        });

        dropZone.addEventListener('drop', (e) => {
            e.preventDefault();
            dropZone.classList.remove('border-blue-400', 'bg-blue-50');
            
            const files = e.dataTransfer.files;
            if (files.length > 0) {
                this.handleFile(files[0]);
            }
        });

        // 识别按钮
        decodeBtn.addEventListener('click', async () => {
            if (!currentFile) {
                this.showError('请先选择图片文件');
                return;
            }

            DevToolsUtils.addLoading(decodeBtn);
            this.setStatus('识别中...');

            const decodeResult = await QRCodeTool.decode(currentFile);

            DevToolsUtils.removeLoading(decodeBtn);

            if (decodeResult.success) {
                const data = decodeResult.data;
                resultContent.innerHTML = `
                    <div class="space-y-4">
                        <div class="bg-green-50 border border-green-200 rounded-lg p-4">
                            <h4 class="font-medium text-green-800 mb-2">识别结果</h4>
                            <div class="bg-white border rounded p-3">
                                <pre class="whitespace-pre-wrap break-all text-sm">${data.text}</pre>
                            </div>
                        </div>
                        <div class="grid grid-cols-2 gap-4 text-sm text-gray-600">
                            <div>图片尺寸: ${data.imageSize.width} × ${data.imageSize.height}</div>
                            <div>内容长度: ${data.text.length} 字符</div>
                        </div>
                        <div class="flex space-x-2">
                            <button id="copy-decoded-text" class="bg-blue-600 hover:bg-blue-700 text-white text-sm py-2 px-3 rounded transition duration-200">
                                复制文本
                            </button>
                            <button id="open-as-url" class="bg-green-600 hover:bg-green-700 text-white text-sm py-2 px-3 rounded transition duration-200" style="display: ${data.text.startsWith('http') ? 'inline-block' : 'none'}">
                                打开链接
                            </button>
                        </div>
                    </div>
                `;

                // 绑定结果按钮事件
                document.getElementById('copy-decoded-text')?.addEventListener('click', () => {
                    DevToolsUtils.copyToClipboard(data.text);
                });

                document.getElementById('open-as-url')?.addEventListener('click', () => {
                    window.open(data.text, '_blank');
                });

                this.showSuccess('二维码识别成功');
                this.setStatus('识别完成');
            } else {
                resultContent.innerHTML = `
                    <div class="bg-red-50 border border-red-200 rounded-lg p-4">
                        <h4 class="font-medium text-red-800 mb-2">识别失败</h4>
                        <p class="text-sm text-red-700">${decodeResult.error}</p>
                    </div>
                `;
                this.showError(decodeResult.error);
                this.setStatus('识别失败');
            }
        });

        // 清空按钮
        clearDecodeBtn.addEventListener('click', () => {
            currentFile = null;
            fileInput.value = '';
            fileName.textContent = '';
            preview.classList.add('hidden');
            resultContent.innerHTML = `
                <button id="decode-qr" class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-lg transition duration-200 flex items-center mx-auto">
                    <i data-feather="search" class="w-4 h-4 mr-2"></i>
                    开始识别
                </button>
            `;
            // 重新绑定识别按钮事件
            const newDecodeBtn = document.getElementById('decode-qr');
            if (newDecodeBtn) {
                newDecodeBtn.addEventListener('click', async () => {
                    if (!currentFile) {
                        this.showError('请先选择图片文件');
                        return;
                    }

                    DevToolsUtils.addLoading(newDecodeBtn);
                    this.setStatus('识别中...');

                    const decodeResult = await QRCodeTool.decode(currentFile);

                    DevToolsUtils.removeLoading(newDecodeBtn);

                    if (decodeResult.success) {
                        const data = decodeResult.data;
                        resultContent.innerHTML = `
                            <div class="space-y-4">
                                <div class="bg-green-50 border border-green-200 rounded-lg p-4">
                                    <h4 class="font-medium text-green-800 mb-2">识别结果</h4>
                                    <div class="bg-white border rounded p-3">
                                        <pre class="whitespace-pre-wrap break-all text-sm">${data.text}</pre>
                                    </div>
                                </div>
                                <div class="grid grid-cols-2 gap-4 text-sm text-gray-600">
                                    <div>图片尺寸: ${data.imageSize.width} × ${data.imageSize.height}</div>
                                    <div>内容长度: ${data.text.length} 字符</div>
                                </div>
                                <div class="flex space-x-2">
                                    <button id="copy-decoded-text" class="bg-blue-600 hover:bg-blue-700 text-white text-sm py-2 px-3 rounded transition duration-200">
                                        复制文本
                                    </button>
                                    <button id="open-as-url" class="bg-green-600 hover:bg-green-700 text-white text-sm py-2 px-3 rounded transition duration-200" style="display: ${data.text.startsWith('http') ? 'inline-block' : 'none'}">
                                        打开链接
                                    </button>
                                </div>
                            </div>
                        `;

                        // 绑定结果按钮事件
                        document.getElementById('copy-decoded-text')?.addEventListener('click', () => {
                            DevToolsUtils.copyToClipboard(data.text);
                        });

                        document.getElementById('open-as-url')?.addEventListener('click', () => {
                            window.open(data.text, '_blank');
                        });

                        this.showSuccess('二维码识别成功');
                        this.setStatus('识别完成');
                    } else {
                        resultContent.innerHTML = `
                            <div class="bg-red-50 border border-red-200 rounded-lg p-4">
                                <h4 class="font-medium text-red-800 mb-2">识别失败</h4>
                                <p class="text-sm text-red-700">${decodeResult.error}</p>
                            </div>
                        `;
                        this.showError(decodeResult.error);
                        this.setStatus('识别失败');
                    }
                });
            }
            feather.replace();
        });

        // 处理文件函数
        this.handleFile = (file) => {
            if (!file.type.startsWith('image/')) {
                this.showError('请选择图片文件');
                return;
            }

            if (file.size > 10 * 1024 * 1024) {
                this.showError('文件大小不能超过10MB');
                return;
            }

            currentFile = file;
            fileName.textContent = file.name;

            // 显示预览
            const reader = new FileReader();
            reader.onload = (e) => {
                const img = new Image();
                img.onload = () => {
                    const ctx = previewCanvas.getContext('2d');
                    
                    // 计算合适的显示尺寸
                    const maxWidth = 300;
                    const maxHeight = 300;
                    let { width, height } = img;
                    
                    if (width > maxWidth || height > maxHeight) {
                        const ratio = Math.min(maxWidth / width, maxHeight / height);
                        width *= ratio;
                        height *= ratio;
                    }
                    
                    previewCanvas.width = width;
                    previewCanvas.height = height;
                    ctx.drawImage(img, 0, 0, width, height);
                    
                    previewInfo.textContent = `${file.name} (${img.naturalWidth} × ${img.naturalHeight}, ${DevToolsUtils.formatFileSize(file.size)})`;
                    preview.classList.remove('hidden');
                };
                img.src = e.target.result;
            };
            reader.readAsDataURL(file);
        };
    }

    static initCommon() {
        // 通用功能初始化
    }

    static showError(message) {
        const errorDiv = document.getElementById('qr-error');
        const errorMessage = document.getElementById('qr-error-message');
        const successDiv = document.getElementById('qr-success');

        errorMessage.textContent = message;
        errorDiv.classList.remove('hidden');
        successDiv.classList.add('hidden');

        setTimeout(() => {
            errorDiv.classList.add('hidden');
        }, 5000);
    }

    static showSuccess(message) {
        const successDiv = document.getElementById('qr-success');
        const successMessage = document.getElementById('qr-success-message');
        const errorDiv = document.getElementById('qr-error');

        successMessage.textContent = message;
        successDiv.classList.remove('hidden');
        errorDiv.classList.add('hidden');

        setTimeout(() => {
            successDiv.classList.add('hidden');
        }, 3000);
    }

    static setStatus(status) {
        const statusElement = document.getElementById('qr-status');
        if (statusElement) {
            statusElement.textContent = status;
        }
    }
};